<template>
  <div class="cart">
    <nav-bar class="nav-bar">
      <div slot="left" class="back" @click="backClick">
        <img src="../../assets/img/common/back.svg" alt="" />
      </div>
      <div slot="center" class="center">
        购物车({{ $store.state.cartList.length }})
      </div>
    </nav-bar>

    <cart-list />

    <cart-bottom-bar />
  </div>
</template>

<script>
import NavBar from "../../components/common/navbar/NavBar.vue";
import CartList from "./childComps/CartList.vue";
import CartBottomBar from "./childComps/CartBottomBar.vue";

export default {
  name: "Cart",
  components: {
    NavBar,
    CartList,
    CartBottomBar,
  },
  methods: {
    backClick() {
      this.$router.push("/home");
    },
  },
};
</script>

<style scoped>
.nav-bar {
  background-color: #ff5777;
  font-size: 20px;
  color: #fff;
  font-weight: 700;
}
.back {
  height: 44px;
  line-height: 44px;
  margin-top: 5px;
  color: #fff;
}
.center {
  height: 44px;
  line-height: 44px;
}
</style>
